<template>
  <div id="lines" :style="{ width: width, height: height }"></div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { onMounted, onUnmounted, watch } from "vue";
import { dayjs } from 'element-plus'
let ch: any

export default {
  name: "lines",
  props: ["width", "height", "arr"],
  components: {},
  data() {
    return {};
  },
  setup(props) {

    watch(() => props.arr, (newVal, oldVal) => {

      updateEcharts(newVal)
    });

    let charts = echarts;
    onMounted(() => {
      initEcharts();
    });
    onUnmounted(() => {
      charts.dispose;
    });
    function initEcharts() {
      ch = charts.init(document.getElementById("lines"));

      updateEcharts(props.arr)

      window.onresize = function () {
        ch.resize();
      };
    }
    const updateEcharts = (arr: any) => {
      let xTme: any = []
      if (arr.length > 0) {
        xTme = arr[0].value
      }
      let line1V: any = []
      let line2V: any = []
      let barV: any = []

      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (element.index == 0) {
          line1V = element.value
        } else if (element.index == 1) {
          line2V = element.value
        } else if (element.index == 2) {
          barV = element.value
        }
      }
      const x: any = []
      const line1: any = []
      const line2: any = []
      const bar: any = []
      if (xTme) {
        for (let i = 0; i < xTme.length; i++) {
          const element = xTme[i];
          x.push(dayjs(element.time).format('MM-DD HH:mm:ss'))
          let l1 = line1V[i].value ? (line1V[i].value / 10).toFixed(2) : ''
          let l2 = line2V[i].value ? (line2V[i].value / 10).toFixed(2) : ''
          let b = barV[i].value ? 1 : 0

          line1.push(l1)
          line2.push(l2)
          bar.push(b)
        }
      }
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '温度与喷雾电磁阀',
          textStyle: {
            color: 'rgba(102, 255, 255, 1)'
          }
        },
        legend: {
          top: '9%',
          left: 'center',
          textStyle: {
            color: 'rgba(102, 255, 255, 1)'
          }
        },
        color: ['rgb(255, 158, 68)', '#91cc75', '#5470c6'],
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          show: true,
          feature: {
          }
        },
        textStyle: {
          color: 'rgba(102, 255, 255, 1)'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(102, 255, 255, 1)'
            }
          },
          axisLabel: {
            color: 'rgba(102, 255, 255, 1)',
            rotate: 45,
          },

          // prettier-ignore
          data: x
        },
          dataZoom: [
              {
                type: 'inside',
                show: true,
                // xAxisIndex: [0],
                start: 0,
                end: x.length - 1
              },

            ],
        yAxis: [{
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(102, 255, 255, 1)'
            }
          },
          axisLabel: {
            formatter: '{value} ℃',
            color: 'rgba(102, 255, 255, 1)'
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(102, 255, 255, 1)'
            }
          },
        },
        {
          type: 'value',
          // axisLine: {
          //   lineStyle: {
          //     color: 'rgba(102, 255, 255, 1)'
          //   }
          // },
          axisLabel: {
            formatter: (v: number) => {
              return v == 0 ? '关闭' : v == 1 ? '开启' : ''
            },
            color: 'rgba(102, 255, 255, 1)'
          },
          // axisLabel: {
          //   show: false // 关闭刻度标签显示
          // },
          axisTick: {
            show: false // 关闭刻度线显示
          },
          splitLine: {
            show: false // 关闭分割线显示
          }
        }
        ],

        series: [
          {
            name: '出酒温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              color: 'rgb(255, 158, 68)'
            },
            connectNulls: true,
            // prettier-ignore
            data: line1,
          },
          {
            name: '酒糟温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              color: '#91cc75'
            },
            connectNulls: true,
            // prettier-ignore
            data: line2,
          },
          {
            name: '喷雾电磁阀',
            type: 'bar',
            smooth: true,
            itemStyle: {
              color: '#5470c6'
            },
            // prettier-ignore
            yAxisIndex: 1,
            data: bar,
          },
        ]
      };
      ch.clear();
      // 使用刚指定的配置项和数据显示图表。
      ch.setOption(option);

    };
    return {
      initEcharts,
    };
  },
};
</script>

<style scoped></style>
